import React, {Component} from 'react';
import {Carousel} from 'antd'
import $ from 'jquery';
import {Consumer} from "../store";
import {config} from "../config";

import '../css/home.css';
import item3 from '../image/slider2.jpg';
import item4 from '../image/slider3.jpg';
import arrow from '../image/arrow-right.png';
import hand_img3 from '../image/1.png';
import hand_img1 from '../image/2.png';
import marketing_1s from '../image/3.png';
import hand_img4 from '../image/hand_img4.jpg';
import solution1 from '../image/solutions_01.jpg';
import solution2 from '../image/solutions_02.jpg';
import solution3 from '../image/solutions_03.jpg';
import solution4 from '../image/solutions_04.jpg';
import logo from '../image/logo.png';
import huarun from '../image/huarun.jpg';
import edc3 from '../image/edc3d5bc.jpg';
import dear from '../image/2001628c.jpg';

import MenuItem from '../components/MenuItem';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMenu: 0,
            currentSolution: 0,
            interval: undefined
        }
    }

    render() {
        const {currentMenu} = this.state;
        return (
            <div>
                <Carousel autoplay>
                    <div><img src={item3} alt="jpg"></img></div>
                    <div><img src={item4} alt="jpg"></img></div>
                </Carousel>
                <div className="dataContainer">
                    <div className="dataList">
                        <div className="dataListItem">
                            <div style={{marginTop: 30}}><span style={{fontSize: 50}}>5+</span>年</div>
                            <div style={{color: '#5ce2fc', marginTop: 10}}>技术积累</div>
                        </div>
                        <div style={{width: 1, background: '#fff', height: 100, float: 'left', marginTop: 33}}></div>
                        <div className="dataListItem">
                            <div style={{marginTop: 30}}><span style={{fontSize: 50}}>10+</span></div>
                            <div style={{color: '#5ce2fc', marginTop: 10}}>核心服务</div>
                        </div>
                        <div style={{width: 1, background: '#fff', height: 100, float: 'left', marginTop: 33}}></div>
                        <div className="dataListItem">
                            <div style={{marginTop: 30}}><span style={{fontSize: 50}}>50+</span></div>
                            <div style={{color: '#5ce2fc', marginTop: 10}}>成功案例</div>
                        </div>
                        <div style={{width: 1, background: '#fff', height: 100, float: 'left', marginTop: 33}}></div>
                        <div className="dataListItem">
                            <div style={{marginTop: 30}}><span style={{fontSize: 50}}>15+</span></div>
                            <div style={{color: '#5ce2fc', marginTop: 10}}>核心工程师成员</div>
                        </div>
                    </div>
                </div>
                <div className="serviceContainer">
                    <div style={{width: 1280, margin: '0 auto', overflow: 'hidden'}}>
                        <div className="serviceContainerTitle">产品和服务</div>
                        <div className="serviceContainerSubTitle">WHAT WE CAN DO</div>
                        <div className="serviceContainerMenu">
                            <div className="serviceContainerMenuLeft" onClick={() => this.handleOnChangeMenu(1)}><img
                                src={arrow} alt="left"/></div>
                            <div className="serviceContainerMenuList">
                                <div
                                    className={currentMenu === 0 ? 'serviceContainerMenuItem active' : 'serviceContainerMenuItem'}
                                    onMouseOver={() => this.handleOnMouseOver(0)}
                                >
                                    智慧社区
                                </div>
                                <div
                                    className={currentMenu === 1 ? 'serviceContainerMenuItem active' : 'serviceContainerMenuItem'}
                                    onMouseOver={() => this.handleOnMouseOver(1)}
                                >
                                    预约系统
                                </div>
                                <div
                                    className={currentMenu === 2 ? 'serviceContainerMenuItem active' : 'serviceContainerMenuItem'}
                                    onMouseOver={() => this.handleOnMouseOver(2)}
                                >
                                    外卖平台
                                </div>
                                <div
                                    className={currentMenu === 3 ? 'serviceContainerMenuItem active' : 'serviceContainerMenuItem'}
                                    onMouseOver={() => this.handleOnMouseOver(3)}
                                >
                                    服务定制
                                </div>
                            </div>
                            <div className="serviceContainerMenuRight" onClick={() => this.handleOnChangeMenu(2)}><img
                                src={arrow} alt="right"/></div>
                        </div>
                        <div style={{position: 'relative', width: '100%', height: '760px'}}>
                            <div className={currentMenu === 0 ? 'menuItem active' : 'menuItem'}>
                                <MenuItem title="智慧社区"
                                          content="社区商超是一个区域性的互联网平台，提供社区里面的用户来购买商品，集合了几大营销活动，特价活动，满减活动，团购活动，优惠券，签到得积分等，将系统模块化，根据实际情况配套对应的功能模块，以达到更好的用户体验，获取更多的用户，获得更大的收益。"
                                          url="/platform/index/productService"
                                          pictureUrl={hand_img3}
                                          direction1="right"
                                          direction2="left"
                                >
                                </MenuItem>
                            </div>
                            <div className={currentMenu === 1 ? 'menuItem active' : 'menuItem'}>
                                <MenuItem title="预约系统"
                                          content="这是一套预约系统，提供大小门店预约服务，是一套简单小型的系统，能简化工作流程，系统调配工作人员，达到更高的效率，用户不用等，老板有序安排客户。"
                                          url="/platform/index/productService"
                                          pictureUrl={hand_img1}
                                          direction1="left"
                                          direction2="right"

                                >
                                </MenuItem>
                            </div>
                            <div className={currentMenu === 2 ? 'menuItem active' : 'menuItem'}>
                                <MenuItem title="外卖平台"
                                          content="随着美团饿了么等外卖平台佣金大幅度上涨，商家的外卖利润几乎为0，商户迫需自建平台，将原有的客户引入到自己的平台中，这样不用交佣金，只需要好好运营平台，提高收益。
平台中有店内下单，外卖下单，用户扫码下单，简易的收银系统。"
                                          url="/platform/index/productService"
                                          pictureUrl={marketing_1s}
                                          direction1="right"
                                          direction2="left"

                                >
                                </MenuItem>
                            </div>
                            <div className={currentMenu === 3 ? 'menuItem active' : 'menuItem'}>
                                <MenuItem title="服务定制"
                                          content="根据企业需求，灵活开发定制，打造企业专属的服务平台。"
                                          url="/platform/index/productService"
                                          pictureUrl={hand_img4}
                                          direction1="right"
                                          direction2="left"

                                >
                                </MenuItem>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="solutionContainer">
                    <div style={{width: 1280, margin: '0 auto'}}>
                        <div className="solutionContainerTitle">解决方案</div>
                        <div className="solutionContainerSubTitle">OUR SOLUTIONS</div>
                        <div className="solutionContainerList">
                            <div className="solutionContainerListItem">
                                <img src={solution1} alt="jpg"/>
                                <div className="solutionShelter">
                                    <div className="inlineBlock">
                                    </div>
                                    <div className="solutionContainerListItemTitle">
                                        互联网+快消行业
                                    </div>
                                    <div className="solutionContainerListItemContent">
                                        用户消费行为不断变化，对外如何建立全面多元的用户体验
                                    </div>
                                    <div className="solutionContainerListItemFooter">

                                    </div>
                                </div>
                            </div>
                            <div className="solutionContainerListItem">
                                <img src={solution2} alt="jpg"/>
                                <div className="solutionShelter">
                                    <div className="inlineBlock">
                                    </div>
                                    <div className="solutionContainerListItemTitle">
                                        互联网+地产行业
                                    </div>
                                    <div className="solutionContainerListItemContent">
                                        用户消费行为不断变化，对外如何建立全面多元的用户体验
                                    </div>
                                    <div className="solutionContainerListItemFooter">

                                    </div>
                                </div>
                            </div>
                            <div className="solutionContainerListItem">
                                <img src={solution3} alt="jpg"/>
                                <div className="solutionShelter">
                                    <div className="inlineBlock">
                                    </div>
                                    <div className="solutionContainerListItemTitle">
                                        互联网+政务环保
                                    </div>
                                    <div className="solutionContainerListItemContent">
                                        用户消费行为不断变化，对外如何建立全面多元的用户体验
                                    </div>
                                    <div className="solutionContainerListItemFooter">

                                    </div>
                                </div>
                            </div>
                            <div className="solutionContainerListItem">
                                <img src={solution4} alt="jpg"/>
                                <div className="solutionShelter">
                                    <div className="inlineBlock">
                                    </div>
                                    <div className="solutionContainerListItemTitle">
                                        互联网+厂内物流
                                    </div>
                                    <div className="solutionContainerListItemContent">
                                        用户消费行为不断变化，对外如何建立全面多元的用户体验
                                    </div>
                                    <div className="solutionContainerListItemFooter">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="serviceContainer1">
                    <div style={{width: 1280, margin: '0 auto', overflow: 'hidden'}}>
                        <div className="serviceContainerTitle">合作伙伴</div>
                        <div className="serviceContainerSubTitle">OUR PARTNER</div>
                        <div className="partnerContainer clearfix">
                            <div className="partnerItem">
                                <div className="partnerLogo">
                                    <img src={logo} alt={''}/>
                                </div>
                            </div>
                            <div className="partnerItem">
                                <div className="partnerLogo partnerLogo2">
                                    <img src={huarun} alt={''}/>
                                </div>
                            </div>
                            <div className="partnerItem">
                                <div className="partnerLogo partnerLogo3">
                                    <img src={edc3} alt={''}/>
                                </div>
                            </div>
                            <div className="partnerItem">
                                <div className="partnerLogo partnerLogo4">
                                    <img src={dear} alt={''}/>
                                </div>
                            </div>
                        </div>
                        <div className="partnerContainerFooter" onClick={()=>this.handleRedirectCase()}>
                            查看全部
                        </div>
                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} =this.props;
        dispatch({num:0});
        $(document).scrollTop(0);
        this.handleTimer();
        this.handleShowSolution();
    };

    componentWillUnmount() {
        clearInterval(this.state.interval);
    }


    /**
     * 处理鼠标覆盖事件
     * @param num
     */
    handleOnMouseOver(num) {
        this.handleClearTimer();
        this.setState({currentMenu: num});
        this.handleTimer();
    };

    /**
     * 处理点击箭头切换菜单事件
     * @param type
     */
    handleOnChangeMenu(type) {
        this.handleClearTimer();
        let currentMenu = this.state.currentMenu;
        if (type === 1) {
            currentMenu = currentMenu - 1;
            if (currentMenu < 0) {
                currentMenu = 3;
            }
        } else if (type === 2) {
            currentMenu = currentMenu + 1;
            if (currentMenu > 3) {
                currentMenu = 0;
            }
        }
        this.setState({currentMenu});
        this.handleTimer();
    }

    /**
     * 生成定时器
     */
    handleTimer() {
        const _this = this;
        const interval = setInterval(function () {
            _this.handleOnChangeMenu(2);
        }, 6000);
        this.setState({interval});
    };

    /**
     * 清除定时器
     */
    handleClearTimer() {
        const interval = this.state.interval;
        clearInterval(interval);
    };

    /**
     * 处理解决方案遮挡层隐藏与显示
     * @param num
     */
    handleShowSolution() {
        const _this=this;
        $('.solutionContainerListItem').each(function () {
            $(this).mouseenter(function (e) {
                const w=this.clientWidth/2;
                const h=this.clientHeight/2;
                const anglePoint = Math.atan(w / h) * 180 /Math.PI;
                const direct = _this.getDirection(e,w,h,anglePoint);
                switch (direct) {
                    case 'down':
                        $($(this).find('.solutionShelter')).css({left: '0px', top: '100%'}).stop(true, true).animate({top: '0px'}, 'fast');
                        break;
                    case 'up':
                        $($(this).find('.solutionShelter')).css({left: '0px', top: '-100%'}).stop(true, true).animate({top: '0px'}, 'fast');
                        break;
                    case 'right':
                        $($(this).find('.solutionShelter')).css({left: '100%', top: '0px'}).stop(true, true).animate({left: '0px'}, 'fast');
                        break;
                    case 'left':
                        $($(this).find('.solutionShelter')).css({left: '-100%', top: '0px'}).stop(true, true).animate({left: '0px'}, 'fast');
                        break;
                    default:
                        break;
                }
            });
            $(this).mouseleave(function (e) {
                const w=this.clientWidth/2;
                const h=this.clientHeight/2;
                const anglePoint = Math.atan(w / h) * 180 /Math.PI;
                const direct = _this.getDirection(e,w,h,anglePoint);
                switch (direct) {
                    case 'down':
                        $($(this).find('.solutionShelter')).stop(true, true).animate({top: '100%'}, 'fast');
                        break;
                    case 'up':
                        $($(this).find('.solutionShelter')).stop(true, true).animate({top: '-100%'}, 'fast');
                        break;
                    case 'right':
                        $($(this).find('.solutionShelter')).stop(true, true).animate({left: '100%'}, 'fast');
                        break;
                    case 'left':
                        $($(this).find('.solutionShelter')).stop(true, true).animate({left: '-100%'}, 'fast');
                        break;
                    default:
                        break;
                }
            })
        })
    };

    getDirection(event, w, h, anglePoint) {
        let direct,
            x = event.offsetX,
            y = event.offsetY,
            angle = Math.atan((x - w) / -(y - h)) * 180 / Math.PI;
        if (angle <= anglePoint && angle >= -anglePoint) {
            if (y > h) {
                direct = 'down';
            } else {
                direct = 'up';
            }
        } else if (x > w) {
            direct = 'right';
        } else {
            direct = 'left';
        }
        return direct;
    };

    /**
     * 跳转到案例页
     */
    handleRedirectCase(){
        this.props.history.push(config.path+`/index/successfulCase`);
    };

    /**
     * 跳转到产品与服务页
     */
    handleRedirectService(){
        this.props.history.push(config.path+`/index/productService`);
    }
}

export default prop=>(
        <Consumer>
            {
                props=>(
                    <Home {...prop} {...props}/>
                )
            }
        </Consumer>
)
//export default Home